<template>
  <div class="module-demo-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <el-icon><Grid /></el-icon>
          模块加载系统演示
        </h1>
        <p class="page-description">
          这是一个完整的动态模块加载系统演示，展示了模块的注册、加载、卸载、配置管理等功能。
        </p>
      </div>
      <div class="header-actions">
        <el-button-group>
          <el-button type="primary" @click="refreshAllModules" :loading="refreshing">
            <el-icon><Refresh /></el-icon>
            刷新所有模块
          </el-button>
          <el-button @click="showSystemStats = true">
            <el-icon><DataLine /></el-icon>
            系统统计
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon total">
                <el-icon><Grid /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ moduleStats.total }}</div>
                <div class="stat-label">总模块数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon loaded">
                <el-icon><Check /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ moduleStats.loaded }}</div>
                <div class="stat-label">已加载</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon loading">
                <el-icon><Loading /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ moduleStats.loading }}</div>
                <div class="stat-label">加载中</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon error">
                <el-icon><WarningFilled /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ moduleStats.error }}</div>
                <div class="stat-label">错误</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-row :gutter="20">
        <!-- 左侧：模块列表和控制面板 -->
        <el-col :span="8">
          <el-card class="control-panel">
            <template #header>
              <div class="card-header">
                <span>模块控制</span>
                <el-button size="small" @click="showModuleManager = true">
                  <el-icon><Setting /></el-icon>
                  管理面板
                </el-button>
              </div>
            </template>
            
            <!-- 模块搜索 -->
            <div class="search-section">
              <el-input
                v-model="searchQuery"
                placeholder="搜索模块..."
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>

            <!-- 分类筛选 -->
            <div class="filter-section">
              <el-select
                v-model="selectedCategory"
                placeholder="按分类筛选"
                clearable
                @change="handleCategoryFilter"
                size="small"
                style="width: 100%"
              >
                <el-option
                  v-for="category in availableCategories"
                  :key="category"
                  :label="category"
                  :value="category"
                />
              </el-select>
            </div>

            <!-- 模块列表 -->
            <div class="module-list">
              <div
                v-for="module in filteredModules"
                :key="module.id"
                class="module-item"
                :class="{ active: selectedModuleId === module.id }"
                @click="selectModule(module.id)"
              >
                <div class="module-item-header">
                  <div class="module-item-icon">
                    <el-icon 
                      :size="20" 
                      :color="getModuleColor(module.category)"
                    >
                      <component :is="getModuleIcon(module.category)" />
                    </el-icon>
                  </div>
                  <div class="module-item-info">
                    <div class="module-item-name">{{ module.name }}</div>
                    <div class="module-item-category">{{ module.category }}</div>
                  </div>
                  <div class="module-item-status">
                    <el-tag 
                      :type="getStatusTagType(getModuleStatus(module.id))"
                      size="small"
                    >
                      {{ getStatusText(getModuleStatus(module.id)) }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </div>

            <!-- 批量操作 -->
            <div class="batch-actions">
              <el-button-group style="width: 100%">
                <el-button 
                  type="primary" 
                  size="small"
                  @click="loadAllModules"
                  :loading="batchOperating"
                  style="flex: 1"
                >
                  加载全部
                </el-button>
                <el-button 
                  type="warning" 
                  size="small"
                  @click="unloadAllModules"
                  :loading="batchOperating"
                  style="flex: 1"
                >
                  卸载全部
                </el-button>
              </el-button-group>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧：模块预览和详情 -->
        <el-col :span="16">
          <div class="module-preview">
            <!-- 模块预览区域 -->
            <el-card class="preview-card">
              <template #header>
                <div class="card-header">
                  <span>模块预览</span>
                  <div class="header-actions">
                    <el-button-group v-if="selectedModuleId">
                      <el-button 
                        size="small"
                        @click="loadSelectedModule"
                        :loading="moduleOperating"
                        :disabled="isModuleLoaded(selectedModuleId)"
                      >
                        <el-icon><Download /></el-icon>
                        加载
                      </el-button>
                      <el-button 
                        size="small"
                        @click="unloadSelectedModule"
                        :loading="moduleOperating"
                        :disabled="!isModuleLoaded(selectedModuleId)"
                      >
                        <el-icon><Upload /></el-icon>
                        卸载
                      </el-button>
                      <el-button 
                        size="small"
                        @click="reloadSelectedModule"
                        :loading="moduleOperating"
                        :disabled="!isModuleLoaded(selectedModuleId)"
                      >
                        <el-icon><RefreshRight /></el-icon>
                        重载
                      </el-button>
                    </el-button-group>
                  </div>
                </div>
              </template>

              <div class="preview-content">
                <div v-if="!selectedModuleId" class="empty-state">
                  <el-empty description="请从左侧选择一个模块进行预览">
                    <el-button type="primary" @click="showModuleManager = true">
                      查看所有模块
                    </el-button>
                  </el-empty>
                </div>
                <div v-else>
                  <!-- 使用动态模块加载器 -->
                  <DynamicModuleLoader
                    :module-id="selectedModuleId"
                    :auto-load="false"
                    :module-props="moduleConfig"
                    @loaded="onModuleLoaded"
                    @error="onModuleError"
                    @unloaded="onModuleUnloaded"
                    @module-event="onModuleEvent"
                  />
                </div>
              </div>
            </el-card>

            <!-- 模块详情区域 -->
            <el-card v-if="selectedModuleId" class="details-card">
              <template #header>
                <div class="card-header">
                  <span>模块详情</span>
                  <el-button size="small" @click="showConfigDialog = true">
                    <el-icon><Setting /></el-icon>
                    配置
                  </el-button>
                </div>
              </template>

              <div class="details-content">
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="模块名称">
                    {{ selectedModule?.name }}
                  </el-descriptions-item>
                  <el-descriptions-item label="版本">
                    {{ selectedModule?.version }}
                  </el-descriptions-item>
                  <el-descriptions-item label="分类">
                    <el-tag :type="getModuleTagType(selectedModule?.category)">
                      {{ selectedModule?.category }}
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="作者">
                    {{ selectedModule?.author }}
                  </el-descriptions-item>
                  <el-descriptions-item label="入口文件">
                    {{ selectedModule?.entry }}
                  </el-descriptions-item>
                  <el-descriptions-item label="状态">
                    <el-tag :type="getStatusTagType(getModuleStatus(selectedModuleId))">
                      {{ getStatusText(getModuleStatus(selectedModuleId)) }}
                    </el-tag>
                  </el-descriptions-item>
                </el-descriptions>

                <div class="module-description">
                  <h4>描述</h4>
                  <p>{{ selectedModule?.description }}</p>
                </div>

                <div v-if="selectedModule?.dependencies && selectedModule.dependencies.length > 0" class="module-dependencies">
                  <h4>依赖模块</h4>
                  <div class="dependency-tags">
                    <el-tag
                      v-for="dep in selectedModule.dependencies"
                      :key="dep"
                      :type="isModuleLoaded(dep) ? 'success' : 'info'"
                      size="small"
                    >
                      {{ dep }}
                    </el-tag>
                  </div>
                </div>

                <div v-if="selectedModuleId && getModuleErrorHistory(selectedModuleId).length > 0" class="module-errors">
                  <h4>错误历史</h4>
                  <el-timeline>
                    <el-timeline-item
                      v-for="error in getModuleErrorHistory(selectedModuleId)"
                      :key="error.timestamp"
                      :timestamp="new Date(error.timestamp).toLocaleString()"
                      type="danger"
                      size="small"
                    >
                      <div class="error-item">
                        <div class="error-type">{{ error.errorType }}</div>
                        <div class="error-message">{{ error.errorMessage }}</div>
                      </div>
                    </el-timeline-item>
                  </el-timeline>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 系统统计对话框 -->
    <el-dialog
      v-model="showSystemStats"
      title="系统统计信息"
      width="800px"
    >
      <div class="system-stats-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <template #header>
                <span>模块统计</span>
              </template>
              <div class="stats-grid">
                <div class="stat-item">
                  <div class="stat-value">{{ moduleStats.total }}</div>
                  <div class="stat-label">总模块数</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ moduleStats.loaded }}</div>
                  <div class="stat-label">已加载</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ moduleStats.enabled }}</div>
                  <div class="stat-label">已启用</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ moduleStats.error }}</div>
                  <div class="stat-label">错误</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <template #header>
                <span>性能指标</span>
              </template>
              <div class="performance-stats">
                <div class="performance-item">
                  <span class="performance-label">平均加载时间:</span>
                  <span class="performance-value">{{ systemStats.performance.averageLoadTime?.toFixed(2) || 0 }}ms</span>
                </div>
                <div class="performance-item">
                  <span class="performance-label">总错误数:</span>
                  <span class="performance-value">{{ systemStats.performance.totalErrors || 0 }}</span>
                </div>
                <div class="performance-item">
                  <span class="performance-label">缓存命中率:</span>
                  <span class="performance-value">{{ (systemStats.storage.hitRate || 0).toFixed(1) }}%</span>
                </div>
                <div class="performance-item">
                  <span class="performance-label">缓存条目:</span>
                  <span class="performance-value">{{ systemStats.storage.totalEntries || 0 }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <!-- 模块管理器对话框 -->
    <el-dialog
      v-model="showModuleManager"
      title="模块管理器"
      width="90%"
      top="5vh"
    >
      <ModuleManagementPanel />
    </el-dialog>

    <!-- 模块配置对话框 -->
    <el-dialog
      v-model="showConfigDialog"
      :title="`配置 ${selectedModule?.name}`"
      width="600px"
    >
      <div class="config-content">
        <el-form
          ref="configFormRef"
          :model="configForm"
          :rules="configRules"
          label-width="120px"
        >
          <el-form-item label="模块配置" prop="config">
            <el-input
              v-model="configForm.config"
              type="textarea"
              :rows="10"
              placeholder="请输入JSON格式的模块配置"
            />
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showConfigDialog = false">取消</el-button>
          <el-button type="primary" @click="saveModuleConfig" :loading="savingConfig">
            保存配置
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
/**
 * 模块加载系统演示页面
 * 
 * 功能：
 * 1. 展示模块加载系统的完整功能
 * 2. 提供模块管理界面
 * 3. 实时显示模块状态和统计信息
 * 4. 提供模块预览和配置功能
 */

import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Grid, 
  Refresh, 
  DataLine, 
  Setting, 
  Search,
  Check,
  Loading,
  WarningFilled,
  Download,
  Upload,
  RefreshRight,
  Monitor,
  Message,
  Document,
  VideoPlay
} from '@element-plus/icons-vue'
import { useModuleStore } from '@/stores/module'
import DynamicModuleLoader from '@/modules/components/DynamicModuleLoader.vue'
import ModuleManagementPanel from '@/modules/components/ModuleManagementPanel.vue'
import type { DynamicModule, ModuleConfig } from '@/modules/dynamic/types'

// ==================== 依赖注入 ====================
const moduleStore = useModuleStore()

// ==================== 响应式状态 ====================
/** 刷新状态 */
const refreshing = ref(false)
/** 批量操作状态 */
const batchOperating = ref(false)
/** 模块操作状态 */
const moduleOperating = ref(false)
/** 保存配置状态 */
const savingConfig = ref(false)

/** 搜索查询 */
const searchQuery = ref('')
/** 选中的分类 */
const selectedCategory = ref('')
/** 选中的模块ID */
const selectedModuleId = ref('')

/** 对话框状态 */
const showSystemStats = ref(false)
const showModuleManager = ref(false)
const showConfigDialog = ref(false)

/** 配置表单 */
const configFormRef = ref()
const configForm = ref({
  config: '{}'
})

/** 配置表单验证规则 */
const configRules = {
  config: [
    { required: true, message: '请输入模块配置', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        try {
          JSON.parse(value)
          callback()
        } catch (error) {
          callback(new Error('请输入有效的JSON格式'))
        }
      },
      trigger: 'blur'
    }
  ]
}

// ==================== 计算属性 ====================
/** 模块统计信息 */
const moduleStats = computed(() => moduleStore.moduleStats)

/** 系统统计信息 */
const systemStats = computed(() => moduleStore.getSystemStats())

/** 可用分类 */
const availableCategories = computed(() => moduleStore.availableCategories)

/** 过滤后的模块列表 */
const filteredModules = computed(() => {
  let modules = moduleStore.modules

  // 搜索筛选
  if (searchQuery.value) {
    modules = moduleStore.searchModules(searchQuery.value)
  }

  // 分类筛选
  if (selectedCategory.value) {
    modules = moduleStore.getModulesByCategory(selectedCategory.value)
  }

  return modules
})

/** 选中的模块 */
const selectedModule = computed(() => {
  return moduleStore.getModule(selectedModuleId.value)
})

/** 模块配置 */
const moduleConfig = ref<ModuleConfig>({})

// ==================== 生命周期钩子 ====================
/**
 * 组件挂载时初始化
 */
onMounted(async () => {
  await initializeDemo()
})

/**
 * 组件卸载时清理
 */
onUnmounted(() => {
  cleanupDemo()
})

// ==================== 初始化方法 ====================
/**
 * 初始化演示
 */
async function initializeDemo() {
  try {
    await moduleStore.initialize()
    console.log('[ModuleDemo] Demo initialized successfully')
  } catch (error) {
    console.error('[ModuleDemo] Failed to initialize demo:', error)
    ElMessage.error('初始化演示失败')
  }
}

/**
 * 清理演示
 */
function cleanupDemo() {
  // 清理定时器等资源
}

// ==================== 模块操作方法 ====================
/**
 * 选择模块
 */
function selectModule(moduleId: string) {
  selectedModuleId.value = moduleId
  // 更新模块配置
  const config = moduleStore.getModuleConfig(moduleId)
  moduleConfig.value = config
  configForm.value.config = JSON.stringify(config, null, 2)
}

/**
 * 加载选中的模块
 */
async function loadSelectedModule() {
  if (!selectedModuleId.value) return
  
  try {
    moduleOperating.value = true
    await moduleStore.loadModule(selectedModuleId.value)
    ElMessage.success('模块加载成功')
  } catch (error) {
    console.error('Failed to load selected module:', error)
    ElMessage.error('模块加载失败')
  } finally {
    moduleOperating.value = false
  }
}

/**
 * 卸载选中的模块
 */
async function unloadSelectedModule() {
  if (!selectedModuleId.value) return
  
  try {
    moduleOperating.value = true
    await moduleStore.unloadModule(selectedModuleId.value)
    ElMessage.success('模块卸载成功')
  } catch (error) {
    console.error('Failed to unload selected module:', error)
    ElMessage.error('模块卸载失败')
  } finally {
    moduleOperating.value = false
  }
}

/**
 * 重载选中的模块
 */
async function reloadSelectedModule() {
  if (!selectedModuleId.value) return
  
  try {
    moduleOperating.value = true
    await moduleStore.reloadModule(selectedModuleId.value)
    ElMessage.success('模块重载成功')
  } catch (error) {
    console.error('Failed to reload selected module:', error)
    ElMessage.error('模块重载失败')
  } finally {
    moduleOperating.value = false
  }
}

/**
 * 刷新所有模块
 */
async function refreshAllModules() {
  try {
    refreshing.value = true
    await moduleStore.fetchAvailableModules()
    ElMessage.success('所有模块已刷新')
  } catch (error) {
    console.error('Failed to refresh all modules:', error)
    ElMessage.error('刷新模块失败')
  } finally {
    refreshing.value = false
  }
}

/**
 * 加载所有模块
 */
async function loadAllModules() {
  try {
    batchOperating.value = true
    const moduleIds = moduleStore.modules.map(m => m.id)
    await moduleStore.loadModules(moduleIds)
    ElMessage.success(`已加载 ${moduleIds.length} 个模块`)
  } catch (error) {
    console.error('Failed to load all modules:', error)
    ElMessage.error('批量加载模块失败')
  } finally {
    batchOperating.value = false
  }
}

/**
 * 卸载所有模块
 */
async function unloadAllModules() {
  try {
    batchOperating.value = true
    const moduleIds = moduleStore.loadedModules.map(m => m.id)
    await moduleStore.unloadModules(moduleIds)
    ElMessage.success(`已卸载 ${moduleIds.length} 个模块`)
  } catch (error) {
    console.error('Failed to unload all modules:', error)
    ElMessage.error('批量卸载模块失败')
  } finally {
    batchOperating.value = false
  }
}

// ==================== 事件处理方法 ====================
/**
 * 处理搜索
 */
function handleSearch() {
  // 搜索是响应式的，不需要额外处理
}

/**
 * 处理分类筛选
 */
function handleCategoryFilter() {
  // 筛选是响应式的，不需要额外处理
}

/**
 * 模块加载完成事件
 */
function onModuleLoaded(moduleId: string, component: any) {
  console.log(`[ModuleDemo] Module ${moduleId} loaded:`, component)
  ElMessage.success(`模块 ${moduleId} 加载成功`)
}

/**
 * 模块加载错误事件
 */
function onModuleError(moduleId: string, error: Error) {
  console.error(`[ModuleDemo] Module ${moduleId} error:`, error)
  ElMessage.error(`模块 ${moduleId} 加载失败: ${error.message}`)
}

/**
 * 模块卸载完成事件
 */
function onModuleUnloaded(moduleId: string) {
  console.log(`[ModuleDemo] Module ${moduleId} unloaded`)
  ElMessage.success(`模块 ${moduleId} 卸载成功`)
}

/**
 * 模块自定义事件
 */
function onModuleEvent(moduleId: string, event: string, payload: any) {
  console.log(`[ModuleDemo] Module ${moduleId} event: ${event}`, payload)
}

// ==================== 配置管理方法 ====================
/**
 * 保存模块配置
 */
async function saveModuleConfig() {
  if (!configFormRef.value || !selectedModuleId.value) return
  
  try {
    await configFormRef.value.validate()
    savingConfig.value = true
    
    // 解析配置
    const config = JSON.parse(configForm.value.config)
    
    // 更新模块配置
    moduleStore.setModuleConfig(selectedModuleId.value, config)
    moduleConfig.value = config
    
    showConfigDialog.value = false
    ElMessage.success('模块配置已保存')
  } catch (error) {
    ElMessage.error('保存配置失败: ' + (error instanceof Error ? error.message : 'Unknown error'))
  } finally {
    savingConfig.value = false
  }
}

// ==================== 辅助方法 ====================
/**
 * 获取模块状态
 */
function getModuleStatus(moduleId: string): 'loading' | 'loaded' | 'error' | 'unloaded' {
  return moduleStore.getModuleLoadState(moduleId)
}

/**
 * 检查模块是否已加载
 */
function isModuleLoaded(moduleId: string): boolean {
  return moduleStore.isModuleLoaded(moduleId)
}

/**
 * 获取模块错误历史
 */
function getModuleErrorHistory(moduleId: string) {
  return moduleStore.getErrorHistory(moduleId)
}

/**
 * 获取状态标签类型
 */
function getStatusTagType(status: string): string {
  const typeMap: Record<string, string> = {
    'loaded': 'success',
    'loading': 'warning',
    'error': 'danger',
    'unloaded': 'info'
  }
  return typeMap[status] || 'info'
}

/**
 * 获取状态文本
 */
function getStatusText(status: string): string {
  const textMap: Record<string, string> = {
    'loaded': '已加载',
    'loading': '加载中',
    'error': '错误',
    'unloaded': '未加载'
  }
  return textMap[status] || '未知'
}

/**
 * 根据模块分类获取对应的图标
 */
function getModuleIcon(category?: string): any {
  const iconMap: Record<string, any> = {
    'default': Grid,
    'system': Setting,
    'tool': Setting,
    'dashboard': Monitor,
    'communication': Message,
    'file': Document,
    'entertainment': VideoPlay
  }
  return iconMap[category || 'default'] || Grid
}

/**
 * 根据模块分类获取对应的颜色
 */
function getModuleColor(category?: string): string {
  const colorMap: Record<string, string> = {
    'default': '#409EFF',
    'system': '#909399',
    'tool': '#E6A23C',
    'dashboard': '#67C23A',
    'communication': '#8B5CF6',
    'file': '#F56C6C',
    'entertainment': '#FF6B6B'
  }
  return colorMap[category || 'default'] || '#409EFF'
}

/**
 * 根据模块分类获取对应的标签类型
 */
function getModuleTagType(category?: string): string {
  const typeMap: Record<string, string> = {
    'default': 'primary',
    'system': 'info',
    'tool': 'warning',
    'dashboard': 'success',
    'communication': 'danger',
    'file': 'danger',
    'entertainment': 'danger'
  }
  return typeMap[category || 'default'] || 'primary'
}
</script>

<style scoped>
.module-demo-view {
  padding: 20px;
  background: var(--bg-color);
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.header-content {
  flex: 1;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 600;
  color: var(--text-color);
}

.page-description {
  margin: 0;
  font-size: 16px;
  color: var(--text-color-secondary);
  line-height: 1.5;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 统计卡片 */
.stats-section {
  margin-bottom: 30px;
}

.stat-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-icon.total {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.loaded {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.loading {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-icon.error {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-color-secondary);
}

/* 主要内容区域 */
.main-content {
  display: flex;
  gap: 20px;
}

/* 控制面板 */
.control-panel {
  height: fit-content;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

/* 搜索和筛选 */
.search-section {
  margin-bottom: 16px;
}

.filter-section {
  margin-bottom: 16px;
}

/* 模块列表 */
.module-list {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.module-item {
  padding: 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.module-item:hover {
  background: var(--bg-color-secondary);
  border-color: var(--border-color);
}

.module-item.active {
  background: var(--primary-color-light);
  border-color: var(--primary-color);
}

.module-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.module-item-icon {
  flex-shrink: 0;
}

.module-item-info {
  flex: 1;
  min-width: 0;
}

.module-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 2px;
}

.module-item-category {
  font-size: 12px;
  color: var(--text-color-secondary);
}

.module-item-status {
  flex-shrink: 0;
}

/* 批量操作 */
.batch-actions {
  margin-top: 16px;
}

/* 模块预览 */
.module-preview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.preview-card,
.details-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.preview-content {
  min-height: 300px;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

/* 模块详情 */
.details-content {
  padding: 16px 0;
}

.module-description {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.module-description h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}

.module-description p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-color-secondary);
}

.module-dependencies {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.module-dependencies h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}

.dependency-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.module-errors {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.module-errors h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}

.error-item {
  padding: 8px 12px;
  background: var(--bg-color-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--error-color);
}

.error-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--error-color);
  margin-bottom: 4px;
}

.error-message {
  font-size: 14px;
  color: var(--text-color-secondary);
  word-break: break-word;
}

/* 系统统计内容 */
.system-stats-content {
  padding: 20px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: var(--bg-color-secondary);
  border-radius: var(--radius-md);
}

.performance-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.performance-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.performance-item:last-child {
  border-bottom: none;
}

.performance-label {
  font-size: 14px;
  color: var(--text-color-secondary);
}

.performance-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

/* 配置内容 */
.config-content {
  padding: 20px 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
  }
  
  .control-panel {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .module-demo-view {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .stats-section .el-col {
    margin-bottom: 16px;
  }
  
  .module-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
  .module-demo-view {
    background: var(--bg-color);
  }
  
  .page-header {
    border-color: var(--border-color);
  }
  
  .stat-card,
  .control-panel,
  .preview-card,
  .details-card {
    background: var(--card-bg);
    border-color: var(--border-color);
  }
  
  .module-item:hover {
    background: var(--bg-color-secondary);
    border-color: var(--border-color);
  }
  
  .module-item.active {
    background: var(--primary-color-light);
    border-color: var(--primary-color);
  }
}
</style>
